<template>
  <div class="contract-container">
    <!-- 左侧分类导航 -->
    <nav class="category-nav">
      <div
        v-for="category in categories"
        :key="category.id"
        :class="['nav-item', { active: activeCategory === category.id }]"
        @click="handleCategoryChange(category.id)"
      >
        {{ category.name }}
        <div v-if="category.sub" class="sub-categories">
          <span
            v-for="sub in category.sub"
            :key="sub"
            @click.stop="handleSubCategoryChange(sub)"
          >
            {{ sub }}
          </span>
        </div>
      </div>
    </nav>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 顶部进度条 -->
      <div class="progress-bar">
        <div :style="{ width: `${progress}%` }" class="progress-fill"></div>
        <div class="notifications">
          <i class="notification-icon" @click="showNotifications">🔔</i>
        </div>
      </div>

      <!-- 合同签署双栏布局 -->
      <div class="contract-wrapper">
        <!-- 合同预览 -->
        <div class="contract-preview">
          <h2 v-if="currentContract">{{ currentContract.title }}</h2>
          <p v-else>加载中...</p>

          <div class="pdf-viewer" ref="pdfViewer"></div>
          <div class="highlight-summary">
            <h3>关键条款</h3>
            <ul>
              <li v-for="(clause, index) in keyClauses" :key="index">
                {{ clause }}
              </li>
            </ul>
          </div>
        </div>

        <!-- 签署操作区 -->
        <div class="signing-panel">
          <!-- 企业信息表单 -->
          <DynamicForm
            :category="activeCategory"
            v-model:formData="enterpriseInfo"
            @validate="handleFormValidate"
          />

          <!-- 电子签名 -->
          <div class="signature-section">
            <h3>法定代表人签名</h3>
            <SignaturePad ref="signaturePad" @save="handleSignatureSave" />
          </div>

          <!-- 地图选择 -->
          <div class="map-section">
            <h3>企业位置选择</h3>
            <MapPicker v-model="selectedLocation" />
          </div>

          <!-- 操作按钮 -->
          <div class="action-buttons">
            <button :disabled="!formValid" @click="handleSubmit">
              提交签署
            </button>
            <button @click="saveDraft">保存草稿</button>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useContractStore } from '@/stores/contract'
import SignaturePad from '@/components/SignaturePad.vue'
import DynamicForm from '@/components/DynamicForm.vue'
import MapPicker from '@/components/MapPicker.vue'
import { useEnterpriseStore } from '@/stores/enterprise'

// 状态管理
const contractStore = useContractStore()
const enterpriseStore = useEnterpriseStore()

// 响应式数据
const activeCategory = ref('manufacture')
const progress = ref(30)
const formValid = ref(false)
const enterpriseInfo = ref({
  name: '',
  licenseNo: '',
  legalPerson: ''
  // 动态字段根据分类不同自动扩展
})
const selectedLocation = ref(null)
const signaturePad = ref(null)

// 分类数据
const categories = [
  {
    id: 'manufacture',
    name: '制造业',
    sub: ['机械制造', '电子设备', '化工生产']
  },
  {
    id: 'logistics',
    name: '物流业',
    sub: ['陆运物流', '海运物流', '航空物流']
  },
  {
    id: 'rd',
    name: '研发类',
    sub: ['软件开发', '硬件研发', '生物科技']
  }
]

// 计算属性
const currentContract = computed(() => contractStore.currentContract)
const keyClauses = computed(() => contractStore.keyClauses)

// 生命周期钩子
onMounted(async () => {
  await contractStore.loadTemplate(activeCategory.value)
})

// 事件处理
const handleCategoryChange = async (categoryId) => {
  activeCategory.value = categoryId
  await contractStore.loadTemplate(categoryId)
  enterpriseStore.resetForm()
}

const handleSubCategoryChange = (subCategory) => {
  console.log('Selected sub category:', subCategory)
  // 这里可以添加子分类处理逻辑
}

const handleSignatureSave = (signatureData) => {
  enterpriseStore.setSignature(signatureData)
}

const handleFormValidate = (isValid) => {
  formValid.value = isValid
}

const handleSubmit = async () => {
  if (!formValid.value) return

  const payload = {
    ...enterpriseInfo.value,
    location: selectedLocation.value,
    signature: enterpriseStore.signature
  }

  try {
    await contractStore.submitContract(payload)
    progress.value = 100
    showSuccess('合同签署成功!')
  } catch (error) {
    showError('提交失败: ' + error.message)
  }
}

const saveDraft = () => {
  // 保存草稿逻辑
}

// 工具方法
const showSuccess = (msg) => {
  console.log('Success:', msg)
  // 实际项目中可使用Toast组件
}

const showError = (msg) => {
  console.error('Error:', msg)
  // 错误提示处理
}
</script>

<style scoped>
/* 基础容器 */
.contract-container {
  display: flex;
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  font-family: 'Segoe UI', system-ui, sans-serif;
}

/* 左侧导航 - 现代质感设计 */
.category-nav {
  width: 280px;
  background: #2c3e50;
  padding: 1.5rem 0;
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
}

.nav-item {
  padding: 1rem 2rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  color: rgba(255, 255, 255, 0.9);

  &:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(4px);
  }

  &.active {
    background: linear-gradient(90deg, #3498db 0%, #2980b9 100%);
    box-shadow: inset 4px 0 0 #1abc9c;

    &::after {
      content: '';
      position: absolute;
      right: -8px;
      top: 50%;
      transform: translateY(-50%);
      border: 8px solid transparent;
      border-right-color: #f8f9fa;
    }
  }
}

.sub-categories {
  margin-top: 0.5rem;
  border-left: 2px solid rgba(255, 255, 255, 0.1);

  span {
    padding: 0.5rem 1.5rem;
    font-size: 0.9em;
    opacity: 0.8;
    transition: all 0.2s;

    &:hover {
      opacity: 1;
      background: rgba(255, 255, 255, 0.05);
    }
  }
}

/* 主内容区 - 现代卡片式布局 */
.main-content {
  flex: 1;
  padding: 2rem;
  position: relative;
}

/* 进度条 - 动态效果 */
.progress-bar {
  height: 6px;
  background: rgba(39, 174, 96, 0.2);
  border-radius: 3px;
  margin-bottom: 2rem;
  overflow: hidden;
  position: relative;

  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #27ae60 0%, #2ecc71 100%);
    transition: width 0.5s ease-out;
    border-radius: 3px;

    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 8px;
      background: rgba(255, 255, 255, 0.3);
      animation: progress-pulse 1.5s infinite;
    }
  }
}

@keyframes progress-pulse {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}

.notifications {
  .notification-icon {
    cursor: pointer;
    padding: 0.8rem;
    border-radius: 50%;
    transition: all 0.3s;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    &:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
  }
}

/* 合同预览区 - 拟物化设计 */
.contract-preview {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 8px 30px -10px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.05);

  h2 {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
  }

  .highlight-summary {
    margin-top: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;

    h3 {
      color: #3498db;
      font-size: 1.1rem;
      margin-bottom: 1rem;
    }

    li {
      padding: 0.5rem 0;
      color: #7f8c8d;
      position: relative;
      padding-left: 1.2rem;

      &::before {
        content: '•';
        color: #27ae60;
        position: absolute;
        left: 0;
      }
    }
  }
}

/* 签署面板 - 玻璃拟态效果 */
.signing-panel {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 按钮设计系统 */
.action-buttons {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;

  button {
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;

    &:disabled {
      background: #bdc3c7 !important;
      cursor: not-allowed;
      opacity: 0.7;
    }

    &:not(:disabled) {
      background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
      color: white;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
      }

      &:active {
        transform: translateY(0);
      }
    }

    &:last-child {
      background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    }
  }
}

/* 地图区域 - 现代边框 */
.map-section {
  margin-top: 1.5rem;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 响应式设计优化 */
@media (max-width: 768px) {
  .contract-container {
    flex-direction: column;
  }

  .category-nav {
    width: 100%;
    height: auto;
    padding: 1rem 0;

    .nav-item {
      padding: 1rem;
    }
  }

  .main-content {
    padding: 1.5rem;
  }

  .contract-wrapper {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .action-buttons {
    flex-direction: column;

    button {
      width: 100%;
      justify-content: center;
    }
  }
}

/* 微交互增强 */
input,
select {
  transition: all 0.3s;
  padding: 0.8rem;
  border: 2px solid #e0e0e0;
  border-radius: 6px;

  &:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
  }
}

/* 动态过渡效果 */
.contract-wrapper {
  transition: grid-template-columns 0.3s ease;
}

/* 加载状态动画 */
.pdf-viewer {
  min-height: 400px;
  background: linear-gradient(90deg, #f5f6fa 25%,rgb(233, 238, 239) 50%, #f5f6fa 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
</style>
